<div>
  <p-growl [value]="msgs"></p-growl>

  <p-treeTable [value]="files1">
    <p-header>Basic</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
  </p-treeTable>

  <p-treeTable [value]="files2" selectionMode="single" [(selection)]="selectedFile" (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)"
    [style]="{'margin-top':'50px'}">
    <p-header>Singe Selection</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
  </p-treeTable>
  <p>Selected Node: {{selectedFile ? selectedFile.data.name : 'none'}}</p>

  <p-treeTable [value]="files3" selectionMode="multiple" [(selection)]="selectedFiles" (onNodeSelect)="nodeSelect($event)"
    (onNodeUnselect)="nodeUnselect($event)" [style]="{'margin-top':'50px'}">
    <p-header>Multiple Selection</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
  </p-treeTable>
  <p>Selected Nodes:
    <span *ngFor="let file of selectedFiles">{{file.data.name}} </span>
  </p>

  <p-treeTable [value]="files4" selectionMode="checkbox" [(selection)]="selectedFiles2" [style]="{'margin-top':'50px'}">
    <p-header>Checkbox Selection</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
  </p-treeTable>
  <p>Selected Nodes:
    <span *ngFor="let file of selectedFiles2">{{file.data.name}} </span>
  </p>

  <p-treeTable [value]="files5" [style]="{'margin-top':'50px'}">
    <p-header>Editable Cells with Templating</p-header>
    <p-column field="name" header="Name">
      <ng-template let-node="rowData" pTemplate="body">
        <input type="text" [(ngModel)]="node.data.name" style="width:100%;border-width:0px 0px 1px 0px">
      </ng-template>
    </p-column>
    <p-column field="size" header="Size">
      <ng-template let-node="rowData" pTemplate="body">
        <input type="text" [(ngModel)]="node.data.size" style="width:100%;border-width:0px 0px 1px 0px">
      </ng-template>
    </p-column>
    <p-column field="type" header="Type">
      <ng-template let-node="rowData" pTemplate="body">
        <input type="text" [(ngModel)]="node.data.type" style="width:100%;border-width:0px 0px 1px 0px">
      </ng-template>
    </p-column>
  </p-treeTable>

  <p-treeTable [value]="files6" selectionMode="single" [(selection)]="selectedFile2" [style]="{'margin-top':'50px'}" [contextMenu]="cm">
    <p-header>Context Menu</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
  </p-treeTable>
  <p-contextMenu #cm [model]="items"></p-contextMenu>

  <p-treeTable [value]="lazyFiles" [style]="{'margin-top':'50px'}" (onNodeExpand)="nodeExpand($event)">
    <p-header>Lazy Loading</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
  </p-treeTable>
</div>
